<template>
  <div>
    <iframe id="printIframe" ref="printIframe" frameborder="0" scrolling="no" style="margin: 0px;padding: 0px;width: 0px;height: 0px;" />
    <div ref="printDIV" style="display:none">
      <!-- 纸张是100mm*100mm,根据公式计算长宽大约是377px(可以根据实际进行调整) -->
      <div v-for="(item, index) in printData" :key="index" style="width: 600px;height: 120px;padding: 10px;page-break-after:always">
        <table border="1" cellspacing="0" style="width: 100%;height: 250px;" align="center">
          <tr>
            <td rowspan="3" style="width: 250px;text-align: center;">
              <div style="width: 100%;">
                <qrcode-vue :value="item.piNo" :size="230" render-as="svg" />
              </div>
            </td>
            <td>&nbsp;&nbsp;&nbsp;物料编码：&nbsp;&nbsp;&nbsp;{{ item.goodsCode }}</td>
          </tr>
          <tr>
            <td>&nbsp;&nbsp;&nbsp;物料名称：&nbsp;&nbsp;&nbsp;{{ item.goodsName }}</td>
          </tr>
          <tr>
            <td>&nbsp;&nbsp;&nbsp;规格尺寸：&nbsp;&nbsp;&nbsp;{{ item.goodsSpecification }}</td>
          </tr>
        </table>

      </div>
    </div>
    <!-- <button @click.stop="printpage()">打印</button> -->
  </div>
</template>
<script>
import QrcodeVue from 'qrcode.vue'
import { listPrintGoods } from '@/api/warehouseManage/inbank/buyInBank'
export default {
  name: 'PrintGoods',
  components: {
    QrcodeVue
  },
  props: {
    piNoArray: {// 批次号数组
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      printData: []
    }
  },
  watch: {
    piNoArray(val) {
      if (val.length > 0) {
        // 通过 piNoArray 查询 要打印的物料信息 (查 WMS_inBankBarCode 表)
        listPrintGoods(this.piNoArray.join(',')).then(res => {
          this.printData = res.data
        }).then(() => {
          this.print()
        })
      }
    }
  },
  mounted() {

  },
  methods: {
    print() {
      // // 拿到要打印区域的dom结构并设置到Iframe的srcdoc属性上面
      var printIframe = this.$refs.printIframe
      var newstr = this.$refs.printDIV.innerHTML
      printIframe.setAttribute('srcdoc', newstr)
      printIframe.onload = function() {
      // 去掉iframe里面的dom的body的padding margin的默认数值
        printIframe.contentWindow.document.body.style.padding = '0px'
        printIframe.contentWindow.document.body.style.margin = '0px'
        // 开始打印
        printIframe.contentWindow.focus()
        printIframe.contentWindow.print()
      }
    }
  }
}
</script>
<style scoped>
</style>
